<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: #6ff;
            margin: 50px;
            overflow: hidden;
        }

        .box .sub {
            width: 80px;
            height: 80px;
            background-color: grey;
            margin: 60px;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="sub"></div>
    </div>
</body>
<script>
    // 事件对象 =>  表示事件发生时的相关信息(什么时间 发生了什么类型的事件,发生在谁身上 鼠标=> 鼠标的按键,鼠标的位置 键盘=>按下的按键,按键对应的字符和键盘符等等..)  
    // 事件函数中可以接收一个形参 => 表示事件发生时的相关信息  => 事件对象(e:event)
    // ele.onclick = function (e) { }
    // 事件对象的兼容

    // 事件对象的属性(通用)
    // timeStamp 从页面加载完毕到事件触发时的间隔时间(单位:ms)
    // type      事件类型(click dblclick mousedown)
    // target    事件源(触发事件的元素  => 给父元素绑定事件,子(代)元素也可以触发父元素上绑定的事件 => 为了区分哪个元素触发了事件 => 事件源)
    // path      从事件源开始,所有父代元素的集合

    // ctrlKey    事件触发时,ctrl键是否被按下
    // shiftKey   事件触发时,shift键是否被按下
    // altKey     事件触发时,alt键是否被按下
    // metaKey    事件触发时,win键是否被按下
    // 常用于做组合键 ctrl + c


    var box = document.getElementsByClassName("box")[0];

    box.onmousedown = function (e) { // 形参 e evt event
        // 常规浏览器: e
        // IE:  window.event;
        // var e = e ? e : window.event; //前面有值就取前面 否则取后面
        var e = e || window.event;//前面有值就取前面 否则取后面

        // console.log(e);
        // console.log(e.timeStamp);
        // console.log(e.type);
        // console.log(e.type);
        // console.log(e.target);
        // console.log(e.path);
        console.log(e.ctrlKey, e.shiftKey, e.altKey, e.metaKey);


    }



</script>

</html>